<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul { 
   list-style-type: none;
   margin: 0;
   padding: 0; 
   width: 200px;
   background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
/*鼠标移动到选项上修改背景颜色*/
li a:hover {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

<p>背景颜色添加到链接中显示链接的区域</p>
<p>注意。整个区域是可点击链接，而不仅仅是文本。</p>
</body>
</html>



